import React from 'react';

export  function Myinput(placeholder,type='text'){
	return (<input type={type} key={type} placeholder={placeholder}/>)
}
export class Button extends React.Component {
  constructor(props) {
      super(props);
      this.state = {data: 0};
      this.setNewNumber = this.setNewNumber.bind(this);
  }
  
  setNewNumber() {
    this.setState({data: this.state.data + 1})
  }
  render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>点我</button>
            <Content myNumber = {this.state.data} state={this.state}></Content>
         </div>
      );
    }
}
 
 
class Content extends React.Component {
  componentWillMount() {
      console.log('Component WILL MOUNT!')
  }
  componentDidMount() {
       console.log('Component DID MOUNT!')
  }
  componentWillReceiveProps(newProps) {
	  console.log(newProps,'newProps1')
        console.log('Component WILL RECEIVE PROPS!')
  }
  shouldComponentUpdate(newProps, newState) {
	  console.log(newProps,'newProps2')
	  console.log(newState,'newState2')
        return true;
  }
  componentWillUpdate(nextProps, nextState) {
	  console.log(nextProps,'nextProps3')
	  console.log(nextState,'nextState3')
        console.log('Component WILL UPDATE!');
  }
  componentDidUpdate(prevProps, prevState) {
	  console.log(prevProps,'prevProps4')
	  console.log(prevState,'prevState4')
        console.log('Component DID UPDATE!')
  }
  componentWillUnmount() {
         console.log('Component WILL UNMOUNT!')
  }
 
    render() {
      return (
        <div>
          <h3>{this.props.myNumber}</h3>
        </div>
      );
    }
}
